<template>
  <div>
    <div class="title-header">
      <div class="line"></div>
      <h3>客户管理</h3>
    </div>
    <el-row>
      <el-col :span="11"
              class="customer"
              border>
        <el-row>
          <el-col :span="16"
                  border>
            <div id="myChart"
                 :style="{width: '300px',height: '300px'}"></div>
          </el-col>
          <el-col :span="8"
                  class="total">
            <el-row><img class="iconImg"
                   src="@/assets/iconImg/customer.png" /><span>客户总数:{{customerTotal}}个</span></el-row>
            <br />
            <el-row><img class="iconImg"
                   src="@/assets/iconImg/accounttotal.png" /><span>账户总数：{{accountTotal}}个</span></el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12"
              border>
        <el-row>
          <el-col :span="8">
            <li class="icon-button"
                @click="handleAccountForm(false)">
              <img src="@/assets/iconImg/addaccount.png" />
              <span>新增账户</span>
            </li>
          </el-col>
          <el-col :span="8">
            <li class="icon-button"
                @click="handleOpen({path:'/goods/business/accountSearch',name:'账户快速查询'})">
              <img src="@/assets/iconImg/accountsearch.png" />
              <span>账户快速查询</span>
            </li>
          </el-col>
          <el-col :span="8">
            <li class="icon-button"
                @click="handleAccountGroupForm(false)">
              <img src="@/assets/iconImg/accountgroup.png" />
              <p>新增账户组</p>
            </li>
          </el-col>
        </el-row>
        <el-row style="margin-top:20px">
          <el-col :span="8">
            <li class="icon-button"
                @click="handleCustomerForm(false)">
              <img src="@/assets/iconImg/addcustomer.png" />
              <span>新增客户</span>
            </li>
          </el-col>
          <el-col :span="8">
            <li class="icon-button"
                @click="handleOpen({path:'/goods/business/customerSearch',name:'客户快速查询'})">
              <img src="@/assets/iconImg/fast.png" />
              <span>客户快速查询</span>
            </li>
          </el-col>
          <el-col :span="8">
            <li class="icon-button"
                @click="handleOpen({path:'/goods/business/accountGroupView',name:'账户组快速查看'})">
              <img src="@/assets/iconImg/fstview.png" />
              <p>账户组快速查看</p>
            </li>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <div class="title-header">
      <div class="line"></div>
      <h3>合同管理</h3>
    </div>
    <el-row class="contract">
      <el-col :span="12"
              border>
        <el-row>
          <el-col :span="12"
                  border>
            <div id="myChart2"
                 :style="{width: '300px', height: '300px'}"></div>
          </el-col>
          <el-col :span="12">
            <el-row><img class="iconImg"
                   src="@/assets/iconImg/contractTotal.png" /><span>已生效合同总数:{{contractTotal}}个</span></el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row>
          <el-col :span="9">
            合同执行情况分析：
          </el-col>
          <el-col :span="15">
            <el-button icon="el-icon-plus"
                       @click="handleConstractForm(false)">
              新增合同
            </el-button>
            <el-button icon="el-icon-search"
                       @click="handleOpen({path:'/goods/business/fastSearch',name:'快速查询'})">快速查询</el-button>
          </el-col>
        </el-row>
        <el-row class="contractNumber">
          <el-col :span="12">
            <img class="iconImg"
                 src="@/assets/iconImg/noview.png">审核中：<span class="auditTotal">{{auditTotal}}个</span>
          </el-col>
          <el-col :span="12">
            <img class="iconImg"
                 src="@/assets/iconImg/back.png">被退回：<span class="backTotal">{{backTotal}}个</span>
          </el-col>
        </el-row>
        <el-row class="contractNumber">
          <el-col :span="12">
            <img class="iconImg"
                 src="@/assets/iconImg/15.png">30天内到期：<span>{{thirtyTotal}}个</span>
          </el-col>
          <el-col :span="12">
            <img class="iconImg"
                 src="@/assets/iconImg/30.png">15天内到期：<span>{{fiftyTotal}}个</span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <add-account-form ref="addAccountForm"
                      @load="loadData"></add-account-form>
    <add-customer-form ref="addCustomerForm"
                       @load="loadData"></add-customer-form>
    <add-account-group-form ref="addAccountGroupForm"
                            @load="loadData"></add-account-group-form>
    <add-contract-form ref="addContractForm"
                       @load="loadData"></add-contract-form>
  </div>
</template>


<script>
import addAccountForm from './business/addAccountForm'
import addCustomerForm from './business/addCustomerForm'
import addAccountGroupForm from './business/addAccountGroupForm'
import addContractForm from './business/addContractForm'
import { getCustomTotal } from '@/api/commerce/customer'
import { getAccountTotal } from '@/api/commerce/account'
import { totalContract } from '@/api/commerce/contract'

export default {
  name: 'business',
  components: {
    addAccountForm,
    addCustomerForm,
    addAccountGroupForm,
    addContractForm
  },
  data() {
    return {
      customerTotal: 0, //客户总数
      accountTotal: 0, //账户总数
      auditTotal: 0, //审核中
      backTotal: 0, //被退回
      fiftyTotal: 0, //15天内到期
      thirtyTotal: 0, //30天内到期
      contractTotal: 0, //已生效合同总数
      accountLegend: [], //账户管理：图表列表
      accountData: [], //账户管理：饼状图
      compactLegend: [], //合同管理：图表列表
      compactInnerData: [], //合同管理：内饼状图
      compactOutData: [] //合同管理：外饼状图
    }
  },
  mounted() {
    // 客户总数
    getCustomTotal().then(res => {
      this.customerTotal = res.data.totalCount
    })
    // 账户总数
    getAccountTotal().then(res => {
      this.accountTotal = res.data.totalCount
      let totalData = res.data.natureStatistics
      for (let i = 0; i < totalData.length; i++) {
        this.accountData.push({
          value: totalData[i].count,
          name: totalData[i].nature + ' ' + totalData[i].count + '个'
        })
        this.accountLegend.push(
          totalData[i].nature + ' ' + totalData[i].count + '个'
        )
      }
      this.loadData()
      this.drawLine()
    })
    //合同总数
    totalContract().then(res => {
      this.contractTotal = res.data.totalCount
      let free = res.data.freeSafeguardStatistics
      let inSettle = res.data.inSettleModeStatistics
      let status = res.data.statusStatistics
      for (let i = 0; i < status.length; i++) {
        if (status[i].code === 'A') {
          this.auditTotal = status[i].count
        } else if (status[i].code === 'R') {
          this.backTotal = status[i].count
        }
      }
      for (let i = 0; i < res.data.periodOfValidityStatistics.length; i++) {
        if (res.data.periodOfValidityStatistics[i].desc === '15天内到期') {
          this.fiftyTotal = res.data.periodOfValidityStatistics[i].count
        } else if (
          res.data.periodOfValidityStatistics[i].desc === '30天内到期'
        ) {
          this.thirtyTotal = res.data.periodOfValidityStatistics[i].count
        }
      }

      for (let i = 0; i < free.length; i++) {
        if (free[i].count > 0) {
          // 饼状图内圈：是否免保管费
          this.compactInnerData.push({
            value: free[i].count,
            name: free[i].desc + ' ' + free[i].count + '个'
          })
          // 图形列表
          this.compactLegend.push(free[i].desc + ' ' + free[i].count + '个')
        }
      }
      for (let i = 0; i < inSettle.length; i++) {
        if (inSettle[i].count > 0) {
          // 饼状图外圈：结算方式
          this.compactOutData.push({
            value: inSettle[i].count,
            name: inSettle[i].desc + ' ' + inSettle[i].count + '个'
          })
          // 图形列表
          this.compactLegend.push(
            inSettle[i].desc + ' ' + inSettle[i].count + '个'
          )
        }
      }
      this.loadData()
      this.drawLine()
    })
    window.addEventListener('storage', val => {
      let key = val.key
      let msg = JSON.parse(val.newValue)
      if (key === 'message') {
        this.loadData()
      }
    })
  },
  methods: {
    handleOpen(val) {
      // this.$router.push('/Home/SystemBase/'+val)
      this.$store.commit('ADD_CACHED_VIEWS', val)
      this.$router.push(val.path)
    },
    loadData() {},
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
      // 绘制图表
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: this.accountLegend
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '60%'],

            label: {
              normal: {
                position: 'inner'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.accountData
          }
        ]
      }
      let option2 = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: this.compactLegend
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
              normal: {
                position: 'inner'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.compactInnerData
          },
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
              normal: {
                backgroundColor: '#eee',
                borderColor: '#aaa',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  a: {
                    color: '#999',
                    lineHeight: 22,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#aaa',
                    width: '100%',
                    borderWidth: 0.5,
                    height: 0
                  },
                  b: {
                    fontSize: 16,
                    lineHeight: 33
                  },
                  per: {
                    color: '#eee',
                    backgroundColor: '#334455',
                    padding: [2, 4],
                    borderRadius: 2
                  }
                }
              }
            },
            data: this.compactOutData
          }
        ]
      }
      myChart.setOption(option)
      myChart2.setOption(option2)
    },
    // 新增账户
    handleAccountForm(bool, item) {
      if (bool) {
        this.$refs.addAccountForm.form = JSON.parse(JSON.stringify(item))
        this.$refs.addAccountForm.isEdit = true
        this.$refs.addAccountForm.dialogForm = true
      } else {
        this.$refs.addAccountForm.dialogForm = true
      }
    },
    // 新增客户
    handleCustomerForm(bool, item) {
      if (bool) {
        this.$refs.addCustomerForm.form = JSON.parse(JSON.stringify(item))
        this.$refs.addCustomerForm.isEdit = true
        this.$refs.addCustomerForm.dialogForm = true
      } else {
        this.$refs.addCustomerForm.dialogForm = true
      }
    },
    // 新增账户组
    handleAccountGroupForm(bool, item) {
      if (bool) {
        this.$refs.addAccountGroupForm.form = JSON.parse(JSON.stringify(item))
        this.$refs.addAccountGroupForm.isEdit = true
        this.$refs.addAccountGroupForm.dialogForm = true
      } else {
        this.$refs.addAccountGroupForm.dialogForm = true
      }
    },
    //新增合同
    handleConstractForm(bool, item) {
      if (bool) {
        this.$refs.addContractForm.form = JSON.parse(JSON.stringify(item))
        this.$refs.addContractForm.isEdit = true
        this.$refs.addContractForm.dialogForm = true
      } else {
        this.$refs.addContractForm.dialogForm = true
      }
    }
  }
}
</script>
<style scoped>
.customer {
  border: 1px solid #eee;
  margin-right: 20px;
  height: 420px;
  padding: 10px;
}
.contract {
  border: 1px solid #eee;
  padding: 10px;
}
.total {
  margin-top: 20px;
}
li.icon-button {
  height: 150px;
  border: 1px;
  background: #f6faff;
  text-align: center;
  line-height: 30px;
  padding-top: 50px;
  border-radius: 5px;
  margin-left: 10px;
}
li.icon-button span {
  display: block;
}
.title-header {
  width: 90%;
  display: flex;
  height: 30px;
  margin: 20px 0;
}
.line {
  border-left: solid 5px #00a1ff;
  height: 18px;
  margin-top: 5px;
}
h3 {
  margin-left: 10px;
}
.iconImg {
  margin-bottom: -10px;
}
.iconImg2 {
  margin-bottom: -10px;
  margin-right: 10px;
  margin-top: 20px;
}
.contractNumber {
  margin-top: 30px;
}
</style>


